const { src, dest, parallel, watch} = require('gulp');
const pug = require('gulp-pug');
const minifyCSS = require('gulp-csso');
const concat = require('gulp-concat');
const sourcemaps = require('gulp-sourcemaps');
const postcss = require('gulp-postcss');
const postcssPresetEnv = require('postcss-preset-env');
const tailwindcss = require('tailwindcss');
const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./build/**/*.html'],
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
})

function html() {
  return src('src/html/*.pug')
    .pipe(pug({pretty:true}))
    .pipe(dest('build/html'))
}

function css() {
  return src('src/css/*.css')
	.pipe(sourcemaps.init())
    .pipe(postcss([postcssPresetEnv({stage:0}),tailwindcss]))
	.pipe(sourcemaps.write('.'))
    .pipe(dest('build/css'))
}

function js() {
  return src('src/js/*.js', { sourcemaps: true })
    .pipe(concat('app.min.js'))
    .pipe(dest('build/js', { sourcemaps: true }))
}

function start(){
	watch('src/css/*.css',css);
	watch('./tailwind.config.js',css);
	// watch('src/html/**/*.pug',html);
	// watch('src/js/*.js',js);
}

function build(){
	return src('src/css/*.css')
		.pipe(sourcemaps.init())
		.pipe(postcss([postcssPresetEnv({stage:0}),tailwindcss,purgecss]))
		.pipe(minifyCSS())
		.pipe(sourcemaps.write('.'))
		.pipe(dest('build/css'))
}
exports.default = start;
exports.js = js;
exports.css = css;
exports.build = build;
exports.html = html;
exports.buildall = parallel(html, build, js);